var path = require('path');
var webpack = require('webpack');
// console.log('__dirname: ', __dirname);
// console.log('path.resolve: ', path.resolve(__dirname, 'dist'));
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 编译清除dist文件夹插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入HTML插件
module.exports = {
  entry: {
    test: './src/index.js',
    index: './src/index.js'
    // vendorsa: './src/test.js'
  },
  // output: {
  //   filename: 'index.js',
  //   path: path.resolve(__dirname, 'dist')
  //   // path: __dirname + '/dist'
  // },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
    // path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/, // 解析css
        use: ['style-loader', 'css-loader'] // 从右向左解析
        /* 
            也可以这样写，这种方式方便写一些配置参数
            use: [
                {loader: 'style-loader'},
                {loader: 'css-loader'}
            ]
        */
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  },
  plugins: [
    // new CleanWebpackPlugin() // 默认情况下，此插件将删除 webpack output.path目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产。
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // 打包输出HTML
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.html' // 根据此模版生成 HTML 文件
    }),
    // 模块热更新
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    host: 'localhost',
    port: '8080',
    inline: true,
    open: true, //自动打开浏览器
    hot: true //热加载
    //hotOnly:true
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        lodash: {
          name: 'chunk-lodash', // 单独将 lodash 拆包
          priority: 10, // 优先级要大于 commons 不然会被打包进 commons
          test: /[\\/]node_modules[\\/]lodash[\\/]/
        },
        commons: {
          name: 'chunk-commons',
          minSize: 1, //表示在压缩前的最小模块大小,默认值是 30kb
          minChunks: 2, // 最小公用次数
          priority: 5, // 优先级
          reuseExistingChunk: true // 公共模块必开启
        }
      }
    }
  }
};
